<template>
    <a-card hoverable :bordered="false" :style="{ width: '100%', marginBottom: '10px' }">
      <div class="zhtj">
          <div class="zhtj_title">
              <div class="zhtj_title_left">
                  综合统计
              </div>
              <div class="zhtj_title_right" v-if="roles == 'superAdmin'">
                  <!-- <div class="zhtj_title_right_item" @click="checkChange('zyrw')" :class="isChecked == 'zyrw'?'zhtj_title_right_item_checked':''">作业任务</div> -->
                  <div class="zhtj_title_right_item" @click="checkChange('psrw')" :class="isChecked == 'psrw'?'zhtj_title_right_item_checked':''">配送任务</div>
                  <!-- <div class="zhtj_title_right_item" @click="checkChange('pscl')" :class="isChecked == 'pscl'?'zhtj_title_right_item_checked':''">配送车辆</div> -->
                  <div class="zhtj_title_right_item" @click="checkChange('khye')" :class="isChecked == 'khye'?'zhtj_title_right_item_checked':''">客户余额</div>
                  <div class="zhtj_title_right_item" @click="checkChange('ysk')" :class="isChecked == 'ysk'?'zhtj_title_right_item_checked':''">应收款</div>
                  <div class="zhtj_title_right_item" @click="checkChange('yfk')" :class="isChecked == 'yfk'?'zhtj_title_right_item_checked':''">应付款</div>
              </div>
              <div class="zhtj_title_right" v-if="roles == 'boos'">
                  <!-- <div class="zhtj_title_right_item" @click="checkChange('zyrw')" :class="isChecked == 'zyrw'?'zhtj_title_right_item_checked':''">作业任务</div> -->
                  <div class="zhtj_title_right_item" @click="checkChange('psrw')" :class="isChecked == 'psrw'?'zhtj_title_right_item_checked':''">配送任务</div>
                  <!-- <div class="zhtj_title_right_item" @click="checkChange('pscl')" :class="isChecked == 'pscl'?'zhtj_title_right_item_checked':''">配送车辆</div> -->
                  <div class="zhtj_title_right_item" @click="checkChange('ysk')" :class="isChecked == 'ysk'?'zhtj_title_right_item_checked':''">应收款</div>
                  <div class="zhtj_title_right_item" @click="checkChange('yfk')" :class="isChecked == 'yfk'?'zhtj_title_right_item_checked':''">应付款</div>
              </div>
              <div class="zhtj_title_right" v-if="roles == 'dzzy' || roles == 'yunshuyuan' || roles == 'yybzg'">
                  <!-- <div class="zhtj_title_right_item" @click="checkChange('zyrw')" :class="isChecked == 'zyrw'?'zhtj_title_right_item_checked':''">作业任务</div> -->
                  <div class="zhtj_title_right_item" @click="checkChange('khye')" :class="isChecked == 'khye'?'zhtj_title_right_item_checked':''">客户余额</div>
              </div>
              <div class="zhtj_title_right" v-if="roles == 'psgs'">
                  <div class="zhtj_title_right_item" @click="checkChange('psrw')" :class="isChecked == 'psrw'?'zhtj_title_right_item_checked':''">配送任务</div>
                  <!-- <div class="zhtj_title_right_item" @click="checkChange('pscl')" :class="isChecked == 'pscl'?'zhtj_title_right_item_checked':''">配送车辆</div> -->
              </div>
              <div class="zhtj_title_right" v-if="roles == 'caiwu'">
                  <div class="zhtj_title_right_item" @click="checkChange('ysk')" :class="isChecked == 'ysk'?'zhtj_title_right_item_checked':''">应收款</div>
                  <div class="zhtj_title_right_item" @click="checkChange('yfk')" :class="isChecked == 'yfk'?'zhtj_title_right_item_checked':''">应付款</div>
              </div>
          </div>
          <div>
                <khye v-if="isChecked == 'khye'"></khye>
                <ysk v-if="isChecked == 'ysk'"></ysk>
                <yfk v-if="isChecked == 'yfk'"></yfk>
                <psrw v-if="isChecked == 'psrw'"></psrw>
                <pscl v-if="isChecked == 'pscl'"></pscl>
                <zyrw v-if="isChecked == 'zyrw'"></zyrw>
          </div>
      </div>
    </a-card>
  </template>
  <script setup>
  
      import khye from './components/zhtj/khye.vue'
      import ysk from './components/zhtj/ysk.vue'
      import yfk from './components/zhtj/yfk.vue'
      import psrw from './components/zhtj/psrw.vue'
      import pscl from './components/zhtj/pscl.vue'
      import zyrw from './components/zhtj/zyrw.vue'
      import { ref, onMounted } from 'vue'
      import { useAppStore, useUserStore } from '@/store'
        const roles = ref('')
        const userStore = useUserStore()
        onMounted(()=>{
            roles.value = userStore.roles[0]
            if(roles.value == 'superAdmin'){
                isChecked.value = 'psrw'
            }
            if(roles.value == 'dzzy' || roles.value == 'yunshuyuan' || roles.value == 'yybzg'){
                isChecked.value = 'zyrw'
            }
            if(roles.value == 'caiwu'){
                isChecked.value = 'ysk'
            }
            if(roles.value == 'psgs'){
                isChecked.value = 'psrw'
            }
            if(roles.value == 'boos'){
                isChecked.value = 'psrw'
            }
        })
      const isChecked = ref('psrw')
      const checkChange = (e) => {
        isChecked.value = e
      } 
  </script>
  <style scoped lang="less">
  .zhtj_title {
      display: flex;
      align-items: center;
      height:40px;
      .zhtj_title_left {
        flex:1;
        font-family: PingFang SC;
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color:#000000;
        padding:2px 10px;
        border-left:5px solid #68C1B2;
    }
    .zhtj_title_right{
        display:flex;
        
        font-size:14px;
        .zhtj_title_right_item:first-children{
            border-radius:3px 0 0 3px;
        }
        .zhtj_title_right_item{
            padding:6px 20px;
            background: #fff;
            color:#00000066;
            border: 1px solid #DCDCDC;
            cursor:pointer;
        }
        .zhtj_title_right_item_checked{
            padding:6px 20px;
            background:#68C1B2;
            color:#fff;
            border: 1px solid #68C1B2;
            border-radius:3px;
        }
    }
  }
  
  </style>
  